<script>
  export let size = "1em";
  export let colorClass = "fill-primary-800";
  export let open = false;
</script>

<svg
  width={size}
  height={size}
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    class={colorClass}
    d="M20.5 4C21.3284 4 22 4.67163 22 5.5V18.5C22 19.3284 21.3284 20 20.5 20H3.5C2.67163 20 2 19.3284 2 18.5V5.5C2 4.67163 2.67163 4 3.5 4H20.5ZM20 5.5C20.2761 5.5 20.5 5.72386 20.5 6V8.9998C20.5 9.27594 20.2761 9.4998 20 9.4998H8.5C7.94772 9.4998 7.5 9.94751 7.5 10.4998L7.5 18.1536C7.5 18.3448 7.27614 18.4998 7 18.4998H9.5C9.22386 18.4998 9 18.3448 9 18.1536L9 11.4998C9 11.2237 9.22386 10.9998 9.5 10.9998L20 10.9998C20.2761 10.9998 20.5 11.2237 20.5 11.4998V18C20.5 18.2761 20.2761 18.5 20 18.5H4C3.72386 18.5 3.5 18.2761 3.5 18V6C3.5 5.72386 3.72386 5.5 4 5.5H20Z"
  />
  {#if open}
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      class={colorClass}
      d="M4.5 7.5C4.5 6.94772 4.94772 6.5 5.5 6.5H19C19.2761 6.5 19.5 6.72386 19.5 7V8C19.5 8.27614 19.2761 8.5 19 8.5H7.5C6.94772 8.5 6.5 8.94772 6.5 9.5V17C6.5 17.2761 6.27614 17.5 6 17.5H5C4.72386 17.5 4.5 17.2761 4.5 17V7.5Z"
    />
  {:else}
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      class={colorClass}
      d="M5 8C5 7.44772 5.44771 7 6 7H19C19.2761 7 19.5 7.22386 19.5 7.5C19.5 7.77614 19.2761 8 19 8H7C6.44772 8 6 8.44772 6 9V17C6 17.2761 5.77614 17.5 5.5 17.5C5.22386 17.5 5 17.2761 5 17V8Z"
    />
  {/if}
</svg>
